<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="author" content="YuKalix">
    <link rel="icon" href="images/logo.png">
    <title>Welcome Use Our Website</title>
    <link rel="stylesheet" href="./css_js/pintuer/pintuer.css">
    <script src="./css_js/pintuer/jquery.js"></script>
    <script src="./css_js/pintuer/pintuer.js"></script>

    <style>
        .c_img {
            width: 100%;
        }

        .c_img img {
            width: 150px;
            height: 150px;
            margin-left: 10px;
        }

        @media screen and (max-width: 960px) {
            .c_img img {
                width: 40px;
                height: 40px;
            }
            .button-group-big .button{
                font-size: 3px;
                padding: 10px 10px;
            }
        }
    </style>

</head>
<body>


<header>

    <div class="keypoint bg-blue bg-inverse radius text-center">
        <p>Welcome Use Our Website</p>
        <button class="button bg-main">
            详细介绍
        </button>
    </div>

</header>


<section>

    <div class="x2 bg-green">
        x3
    </div>

    <div class="x8">
        <div class="button-toolbar">
            <div class="button-group button-group-big">
                <button type="button" class="button" onclick="allcheck();">
                    <span class="icon-align-justify text-red"></span>全选
                </button>

                <button type="button" class="button" onclick="reversecheck();">
                    <span class="icon-refresh text-red"></span>反选
                </button>
                <button type="button" class="button" onclick="chk()">
                    <span class="icon-trash-o text-red"></span>删除
                </button>

                <button type="button" class="button" onclick="selectk()">
                    <span class="icon-edit text-blue"></span>移动

                </button>


                <div class="button-group">

                    <button type="button" class="button dropdown-toggle">
                        <label for="classify">类别</label>
                        <select id="classify" class="drop-menu" name="classify">
                            <option value="cat"> cat</option>
                            <option value="dog"> dog</option>
                        </select>
                    </button>

                </div>

            </div>
        </div>

        <div class="c_img">

            <div class="media-inline" style="float: left;">

                <div class="media clearfix">
                    <label for="d1">
                        <img src="../../data_set/unsigned_set/u=75946134,207016494&fm=26&gp=0.jpg" class="radius"
                             alt="...">
                        <input id="d1" type="checkbox" name="select_image" value="1">
                    </label>
                </div>

            </div>
            <div class="media-inline" style="float: left;">

                <div class="media clearfix">
                    <label for="d2">
                        <img src="../../data_set/unsigned_set/u=75946134,207016494&fm=26&gp=0.jpg" class="radius"
                             alt="...">
                        <input id="d2" type="checkbox" name="select_image" value="2">
                    </label>
                </div>

            </div>
            <div class="media-inline" style="float: left;">

                <div class="media clearfix">
                    <label for="d3">
                        <img src="../../data_set/unsigned_set/u=75946134,207016494&fm=26&gp=0.jpg" class="radius"
                             alt="...">
                        <input id="d3" type="checkbox" name="select_image" value="3">
                    </label>
                </div>

            </div>
            <div class="media-inline" style="float: left;">

                <div class="media clearfix">
                    <label for="d4">
                        <img src="../../data_set/unsigned_set/u=75946134,207016494&fm=26&gp=0.jpg" class="radius"
                             alt="...">
                        <input id="d4" type="checkbox" name="select_image" value="4">
                    </label>
                </div>

            </div>
            <div class="media-inline" style="float: left;">

                <div class="media clearfix">
                    <label for="d5">
                        <img src="../../data_set/unsigned_set/u=75946134,207016494&fm=26&gp=0.jpg" class="radius"
                             alt="...">
                        <input id="d5" type="checkbox" name="select_image" value="5">
                    </label>
                </div>

            </div>
            <div class="media-inline" style="float: left;">

                <div class="media clearfix">
                    <label for="d6">
                        <img src="../../data_set/unsigned_set/u=75946134,207016494&fm=26&gp=0.jpg" class="radius"
                             alt="...">
                        <input id="d6" type="checkbox" name="select_image" value="6">
                    </label>
                </div>

            </div>
            <div class="media-inline" style="float: left;">

                <div class="media clearfix">
                    <label for="d7">
                        <img src="../../data_set/unsigned_set/u=75946134,207016494&fm=26&gp=0.jpg" class="radius"
                             alt="...">
                        <input id="d7" type="checkbox" name="select_image" value="7">
                    </label>
                </div>

            </div>
            <div class="media-inline" style="float: left;">

                <div class="media clearfix">
                    <label for="d8">
                        <img src="../../data_set/unsigned_set/u=75946134,207016494&fm=26&gp=0.jpg" class="radius"
                             alt="...">
                        <input id="d8" type="checkbox" name="select_image" value="8">
                    </label>
                </div>

            </div>
            <div class="media-inline" style="float: left;">

                <div class="media clearfix">
                    <label for="d9">
                        <img src="../../data_set/unsigned_set/u=75946134,207016494&fm=26&gp=0.jpg" class="radius"
                             alt="...">
                        <input id="d9" type="checkbox" name="select_image" value="9">
                    </label>
                </div>

            </div>
            <div class="media-inline" style="float: left;">

                <div class="media clearfix">
                    <label for="d10">
                        <img src="../../data_set/unsigned_set/u=75946134,207016494&fm=26&gp=0.jpg" class="radius"
                             alt="...">
                        <input id="d10" type="checkbox" name="select_image" value="10">
                    </label>
                </div>

            </div>

        </div>
        <div class="clear" style="margin: 0 auto">
            <ul class="pagination pagination-group">
                <li class="disabled"><a href="#">«</a></li>
                <li><a href="#">1</a></li>
                <li class="active"><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">»</a></li>
            </ul>
        </div>
    </div>

    <div class="x2 bg-green">
        x3
    </div>


</section>


<script>
    // 全选

    function allcheck() {

        $('input[name="select_image"]').prop('checked', 'true');
    }

    //反选
    function reversecheck() {
        $('input[name="select_image"]').each(function () {
            $(this).prop("checked", !$(this).prop("checked"));
        });
    }


    function chk() {

        var obj = document.getElementsByName('select_image');

        console.log(obj);

        var s = '';

        for (var i = 0; i < obj.length; i++) {

            if (obj[i].checked) s += obj[i].value + ',';

        }

        alert(s === '' ? '你还没有选择任何内容！' : s);

    }

    function selectk() {

        var select_image = document.getElementsByName('select_image');
        var options=$("#classify option:selected");

        console.log(select_image);
        console.log(classify);

        var s = '';

        for (var i = 0; i < select_image.length; i++) {

            if (select_image[i].checked) s += select_image[i].value + ',';

        }

        alert(s === '' ? '你还没有选择任何内容！' : s);
        alert(s === '' ? '你还没有选择任何内容！' : options.val());

    }
</script>


</body>
</html>